<template>
    <div class="container">
      
        <!-- 搜索框及检索结果浮层 -->

        <div class="search">资料查看界面
           <!-- 浮层显示位置：底部 -->
            <!-- 浮层标题 -->
              <!-- 浮层宽度 -->
                <!-- 控制浮层显示状态 -->
            <el-popover
                placement="bottom"      
                title="检索结果"          
                width="50%"             
                :visible="visible"      
            >
                <template #reference>   <!-- 触发浮层的参考元素 -->
                  <!-- 双向绑定搜索关键词 -->
                    <!-- 自定义样式类 -->
                     <!-- 输入提示文本 -->
                      <!-- 输入框前缀图标 -->
                        <!-- 搜索类型输入框 -->
                          <!-- 输入框尺寸 -->
                             <!-- 输入时显示浮层 -->
                               <!-- 失去焦点时隐藏浮层 -->
                    <el-input
                        v-model="searchText"          
                        class="w-50 m-2"             
                        placeholder="请输入关键字"      
                        :prefix-icon="Search"         
                        type="search"                
                        size="large"                 
                        @input="visible=true"       
                        @blur="visible=false"        
                    />
                </template>

                <!-- 搜索结果列表 -->
                <div v-if="searchlist.length">
                    <!-- 遍历搜索结果 -->
                      <!-- 唯一键值 -->
                       <!-- 结果项样式类 -->
                         <!-- 点击跳转详情页 -->
                    <div
                        v-for="data in searchlist"  
                        :key="data.id"               
                        class="search-item"           
                        @click="handleChangepage(data.id)"
                    >
                        {{ data.title }}              <!-- 显示结果标题 -->
                    </div>
                </div>
                <!-- 无搜索结果提示 -->
                <div v-else>
                   <!-- 空状态描述文本 -->
                    <!-- 空状态图标尺寸 -->
                    <el-empty
                        description="暂无"           
                        :image-size="50"             
                    />
                </div>
            </el-popover>
        </div>

        <!-- 选项卡导航 -->
          <!-- 选项卡外边距 -->
            <!-- 绑定当前激活的选项卡name -->
               <!-- 自定义样式类 -->
        <el-tabs
            style="margin:20px"          
            v-model="whichTab"          
            class="demo-tabs"           
        >
            <!-- 动态生成选项卡面板 -->
                <!-- 唯一键值 -->
                  <!-- 遍历选项卡配置数组 -->
                    <!-- 选项卡显示标签 -->
                      <!-- 选项卡标识 -->
            <el-tab-pane
                :key="item.name"         
                v-for="item in tablist"     
                :label="item.label"        
                :name="item.name"          
            >
                <el-row :gutter="20">       <!-- 行容器，设置列间距 -->
                    <!-- 主内容区域：占18列 -->
                    <el-col :span="18">
                       <!-- 遍历当前分类的资料 -->
                         <!-- 唯一键值 -->
                          <!-- 内边距 -->
                        <div
                            v-for="data in tabnews[item.name]"
                            :key="data.id"               
                            style="padding:10px;"         
                        >
                        <!-- 卡片内容区无内边距 -->
                         <!-- 鼠标悬停显示阴影 -->
                            <!-- 点击跳转详情页 -->
                            <el-card
                                :body-style="{ padding: '0px' }"    
                                shadow="hover"                       
                                @click="handleChangepage(data.id)" 
                            >
                                <div style="padding: 14px;float:left;">
                                    <span>{{ data.title }}</span>     <!-- 显示资料标题 -->
                                    <div class="bottom">
                                    </div>
                                </div>
                            </el-card>
                        </div>
                    </el-col>
                </el-row>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup>
// 引入Element Plus搜索图标
import { Search } from "@element-plus/icons-vue";
// 引入Vue组合式API
import { ref, onMounted, computed } from "vue";
// 引入路由钩子
import { useRouter } from 'vue-router';
// 引入时间处理库
import moment from "moment";
// 引入HTTP请求库
import axios from "axios";
// 引入工具库（用于数组分组）
import _ from "lodash";

// 配置moment.js语言为中文
moment.locale("zh-cn");

// 响应式变量定义
const searchText = ref("");          // 搜索关键词
const visible = ref(false);          // 搜索浮层显示状态
const list = ref([]);                // 所有资料列表
const whichTab = ref(1);             // 当前激活的选项卡标识

// 计算属性：根据搜索关键词过滤资料列表
const searchlist = computed(
  () => searchText.value 
    ? list.value.filter(item => item.title.includes(searchText.value)) // 包含关键词的标题过滤
    : [] // 无关键词时返回空数组
);

// 生命周期钩子：组件挂载后加载资料数据
onMounted(async () => {
  // 实际生产环境代码（需取消注释）
  const form = await axios.get("/material/getAll");
  list.value = form.data.data;
});

// 选项卡配置数组
const tablist = [
  { label: "就业", name: 1 },
  { label: "面试", name: 2 },
  { label: "简历", name: 3 }
];

// 计算属性：按分类分组资料列表
const tabnews = computed(() => _.groupBy(list.value, item => item.category));

// 路由实例
const router = useRouter();

// 跳转详情页处理函数
const handleChangepage = (id) => {
  router.push(`/material/${id}`); // 跳转到资料详情页，携带ID参数
};
</script>

<style scoped lang="scss">
.container {
  position: relative; // 定位容器，用于浮层定位
}

.search {
  .el-input {
    width: 50%; // 搜索输入框宽度占父容器50%
  }
}

.search-item {
  height: 50px;
  line-height: 50px; // 行高与高度一致，实现垂直居中
  &:hover {
    background: whitesmoke; // 鼠标悬停背景色
    color: grey; // 鼠标悬停文字颜色
  }
}

.tab-time {
  font-size: 13px; // 时间文本字体大小
  color: gray; // 时间文本颜色
}

/* 时间轴样式（可根据需求调整） */
.el-timeline {
  margin-top: 20px;
}

.el-timeline-item__label {
  font-size: 14px;
  color: #666;
}
</style>